<template>
    <div :class="className" :style="{height:height,width:width}" />
  </template>
  
  <script>
  import * as echarts from 'echarts';
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        maxCoValue:3,
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          for(const cov of val.CO){
          if(cov>this.maxCoValue){
            this.maxCoValue = cov;
          }
        }
        this.maxCoValue = Math.ceil(this.maxCoValue)
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        for(const cov of this.chartData.CO){
          if(cov>this.maxCoValue){
            this.maxCoValue = cov;
          }
        }
        this.maxCoValue = Math.ceil(this.maxCoValue)
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
  
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
     
        this.setOptions(this.chartData)
  
      },
      setOptions({time,PM25,CO,PM10,SO2,NO2,O3} = {}) {
        this.chart.setOption({
         
          xAxis: {
            data:time,
            type: 'category',
     
            splitLine:{
            show:true,
            lineStyle:{
              width: 1.5,
              opacity: 0.3,
              type:'dashed',
              color:'black'
            },
          },
            splitArea: {
            show: false
            },
            axisLine: {
            show: false,//不显示坐标轴线
      },
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLabel:{
    
              textStyle:{
                fontSize:12,
                  color:"black"
                }
            },
  
  
          },
          grid: {
                left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
            // left: 10,
            // right: 10,
            // bottom: 20,
            // top: 30,
            // containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
            formatter:function (params) {
              var res='<div>'+params[0].name+'</p></div>' 
              for(var i=0;i<params.length;i++){
  
                if(params[i].seriesName == 'AQI'){
                  res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+'</div>';
                }else if(params[i].seriesName == "CO")   {
                  res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+' mg/m³ </div>';
                }else {
                  res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+' μg/m³</div>'
                }
              }
              return res;
              // return params[0].marker+params[0].seriesName;
  
            },
            padding: [5, 10]
          },
          yAxis: [{
            max:this.chartData.max,
            type: 'value',
            splitLine:{
            show:true,
            lineStyle:{
              width: 1.5,
              opacity: 0.3,
              type:'dashed',
              color:'black'
            },
          },
            boundaryGap: [0, '100%'],
            splitArea: {
            show: false
            },
            axisLabel:{//修改坐标系字体颜色
                show:true,
                textStyle:{
                  fontSize:15,
                  color:"black"
                }
              },
  
          },
          {
            type: 'value',
            name:"一\n氧\n化\n碳\n浓\n度\n︵\nmg\n︶",
             splitLine:false,
             splitArea: {
            show: false
            },
            axisLabel:{//修改坐标系字体颜色
                show:true,
                interval:10,//使x轴文字显示全
                textStyle:{
                  fontSize:15,
                  color:"fontSize:15,"
                }
              },
            nameLocation:"center",
            nameGap:35,
            nameRotate:0,
            min:0,
            max:this.maxCoValue,
            nameTextStyle:{
                              fontSize: 15,
                              color: 'black'
                          },
          }
        ],
          legend: {
            data: ['PM2.5','CO','PM10','SO2','NO2','O3'],
            textStyle:{
                  color:'black',
          },
          },
          dataZoom: [
          {
            type: 'inside'
          }
        ],
          toolbox: {
    feature: {
      restore: {},
      saveAsImage: {}
    }
  },
          series: [
  
          {
            showSymbol: false,
            name: 'PM2.5',
            smooth: true,
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            data: PM25,  
            animationDuration: 2000,
            animationEasing: 'quadraticOut',
                
          },
        {
          name: 'CO',
          yAxisIndex:1,
          showSymbol: false,
            smooth: true,
            type: 'line',
      symbol: 'none',
      sampling: 'lttb',
            data: CO,
          
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
        },
        {
          name: 'PM10',
          showSymbol: false,
            smooth: true,
            type: 'line',
      symbol: 'none',
      sampling: 'lttb',
            data: PM10,
          
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
        },
        {
          name: 'NO2',
          showSymbol: false,
            smooth: true,
            type: 'line',
      symbol: 'none',
      sampling: 'lttb',
            data: NO2,
           
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
            
        },
        {
          name: 'SO2',
          showSymbol: false,
            smooth: true,
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            data: SO2,
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
            
        },
        {
          name: 'O3',
            smooth: true,
            showSymbol: false,
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            data: O3,
            
            animationDuration: 2000,
            animationEasing: 'quadraticOut'
        }
      ]
        })
      }
    }
  }
  </script>
  